@import './var.css';
@import './css-vars.css';
@import './common.scss';
@import './base.scss';

// 解决抽屉弹出时，body宽度变化的问题
.el-popup-parent--hidden {
  width: 100% !important;
}


// 主题
html.dark {
  color-scheme: auto;
  background-color: #171d2b;
  color: #fff;
  font-size: 14px;
}

.card-bg-color {
  background: linear-gradient(177deg, #293751 0%, #1F2B3F 100%);
  border-radius: 4px;
}


* {
  margin: 0;
  padding: 0;
}


// select框样式
.el-select__popper {
  background: #37435DFF !important;
  border-color: var(--el-border-color) !important;
}


.el-popper__arrow::before {
  display: none !important;
}

.el-scrollbar__view {
  height: 100%;

  .el-select-dropdown__item {
    text-align: center !important;
    color: #fff;
  }

}

.el-form {
  overflow-x: hidden;
  max-width: 1260px;
  color: rgba(255, 255, 255, 0.6);

  .el-form-item {
    margin-right: 5px;

    .el-input,
    .el-select,
    .el-date-editor--timerange {
      // width: 210px;
      // max-width: 300px;
      height: 31px;
      line-height: 31px;
      background: transparent;
    }

    .el-date-editor--datetimerange,
    .el-date-editor--daterange {
      width: 400px;
    }

    // 去除时间选择器上下 padding
    .el-range-editor.el-input__wrapper {
      padding: 0 10px;
    }

    // el-select 为多选时不换行显示
    .el-select__tags {
      overflow: hidden;
      white-space: nowrap;
    }
  }

  .more-item {
    display: inline;
  }

}

.el-input__inner {
  border: 1px solid #787878;
  background: #34353B;
  color: rgba(255, 255, 255, 0.6);
  height: 31px;
  line-height: 31px;
}

.el-input__icon {
  line-height: 31px;
}

.el-select-dropdown {
  border: 1px solid #787878;
  background: #34353B;
  color: rgba(255, 255, 255, 0.6);

  .el-scrollbar__wrap {
    overflow: hidden;
  }
}

.el-tree-node:focus > .el-tree-node__content {
  background: transparent;
}

.el-radio__inner, .el-date-editor .el-range-input {
  background: #18191E;
  color: #fff;
}

.el-form-item__label {
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

.el-tabs__item, .el-radio {
  color: rgba(255, 255, 255, 0.6);
}

.el-input-number__decrease, .el-input-number__increase {

}

.el-range-editor.el-input__inner {
  padding: 0px;
}

.el-date-editor .el-range-separator, .el-checkbox {
  color: #fff;
}

.el-slider__runway {
  background: #34353B;
}

.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
  background: var(--el-fill-color-light);
}

.el-collapse-item__wrap {
  border-bottom: none;
}

.label-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 300px;
}

.el-date-editor .el-range__icon {
  margin-left: 0px;
}

.el-tabs__nav-wrap::after {
  height: 1px;
  background: #3D4860;
}

.el-tabs__item.is-active {

  color: #4E9EFF;
}

.el-tabs__active-bar {
  height: 3px;
}

.el-radio__inner {
  border: 1px solid #787878;
}

.el-radio__input.is-checked .el-radio__inner {
  background: #00A8FF;
  border: 1px solid rgba(0, 168, 255, 0.4)
}

.el-collapse-item__arrow {
  margin: 0 8px 0 -27px;
}

.el-checkbox__inner {
  background: #1F222A;
  border: 1px solid #787878;
}

.el-popper .popper__arrow {
  border-bottom-color: #787878 !important;
}

.el-popper .popper__arrow::after {
  border-bottom-color: #34353B !important;
}

.dark {
  /* --app-content-bg-color: var(--el-bg-color);
   */
  --left-menu-bg-color: #0f2438;
}

.el-cascader__dropdown {
  background: #0f2438;
  border: 1px solid var(--el-border-color-light);
  color: #CFD3DC !important;
  .el-cascader-menu {
    color: #CFD3DC;
  }
}

.el-cascader-panel {
  background: var(--el-bg-color-overlay);
}

.el-cascader-node:not(.is-disabled):hover, .el-cascader-node:not(.is-disabled):focus {
  background: var(--el-cascader-node-background-hover);
}

.el-tabs--border-card {
  background: transparent;
}

.el-picker__popper.el-popper {
  background: var(--el-bg-color-overlay);
  border: 1px solid var(--el-datepicker-border-color);
  box-shadow: var(--el-box-shadow-light);
}

.el-date-range-picker, .el-picker-panel {
  --el-datepicker-text-color: var(--el-text-color-regular);
  --el-datepicker-off-text-color: var(--el-text-color-placeholder);
  --el-datepicker-header-text-color: var(--el-text-color-regular);
  --el-datepicker-icon-color: var(--el-text-color-primary);
  --el-datepicker-border-color: var(--el-disabled-border-color);
  --el-datepicker-inner-border-color: var(--el-border-color-light);
  --el-datepicker-inrange-bg-color: var(--el-border-color-extra-light);
  --el-datepicker-inrange-hover-bg-color: var(--el-border-color-extra-light);
  --el-datepicker-active-color: var(--el-color-primary);
  --el-datepicker-hover-text-color: var(--el-color-primary);
  color: var(--el-text-color-regular);
  background: #1d1e1f !important;
  border-radius: var(--el-border-radius-base);
  line-height: 30px;

}

.el-date-range-picker {
  width: 646px;
}

.el-date-range-picker__content.is-left {
  border-right: 1px solid #414243;
}

.el-picker-panel {
  border: 1px solid #414243;
}

.el-date-table td.in-range .el-date-table-cell {
  background-color: #2B2B2C;
}

.el-date-table td, .el-picker-panel__icon-btn, .el-date-range-picker__header div, .el-date-table th {
  color: #fff;
}

td.available.in-range {
  background-color: #2B2B2C;
}

.el-date-table td.in-range div, .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div {
  background: transparent;
}

.el-popover.el-popper {
  background: #1d1e1f;
  border: 1px solid #414243;
  box-shadow: var(--el-box-shadow-light);
  color: #fff;
}

/* 直接覆盖Element UI的样式 */
.el-cascader-panel .el-scrollbar__bar {
  background-color: transparent;
}

.el-cascader__dropdown {
  background: #1d1e1f;
}

.tanchu {
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}

.el-scrollbar__bar.is-horizontal {
  background-color: transparent
}

/* 或者使用更具体的选择器来增加样式细节 */
.el-cascader-panel .el-checkbox__input {
  border-radius: 50%;
}
.el-cascader__suggestion-item:focus, .el-cascader__suggestion-item:hover{
  background: #262727;
  color: #CFD3DC;
}
//滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 5px;
  background: rgba(142, 142, 142, 0.2);
}

::-webkit-scrollbar-track {
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background: rgba(142, 142, 142, 0.2);
}

::-webkit-scrollbar-thumb {
  background: #C6C6C6;
  border-radius: 10px;
  height: 200px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar {
  //滚动条样式
  width: 8px;
  height: 10px;
}
/* 设置滚动区域的滚动条样式 */
.scrollbar-container {
  width: 100%;
  height: 200px;
  overflow-y: scroll; /* 使元素可滚动 */
}
